<template>
  <div class="timesImage">
    <!-- 时间 -->
    <div class="time">
      <p class="timeInfo">{{morning || after || evening || earyMorning}}</p>
    </div>
    <!-- 月份 -->
    <div>
      <p class="month">{{month.spring || month.summer || month.autumn || month.winter}}</p>
    </div>
    <!-- show -->
    <div class="timeImage">
      <img
        :src="timeImage.spring"
        alt="图片加载失败！"
        title="春天"
        v-show="nowTimes >= 6 && nowTimes <= 12"
      />
      <img
        :src="timeImage.autumn"
        alt="图片加载失败！"
        title="夏天"
        v-show="nowTimes >= 12 && nowTimes <= 18"
      />
      <img
        :src="timeImage.summer"
        alt="图片加载失败！"
        title="秋天"
        v-show="nowTimes >= 18 && nowTimes <= 24"
      />
      <img :src="timeImage.winter" alt="图片加载失败！" title="冬天" v-show="nowTimes>= 1 && nowTimes < 6" />
    </div>
  </div>
</template>

<script>
export default {
  name: "tips",
  data() {
    return {
      nowTimes: "",
      morning: "",
      after: "",
      evening: "",
      earyMorning: "",
      month: {
        spring: "",
        summer: "",
        autumn: "",
        winter: "",
      },
      timeImage: {
        spring: require("./../../../public/image/tips/spring.jpg"),
        autumn: require("./../../../public/image/tips/autumn.jpg"),
        summer: require("./../../../public/image/tips/summer.jpg"),
        winter: require("./../../../public/image/tips/winter.jpg"),
      },
    };
  },
  mounted() {
    this.times();
  },
  methods: {
    //   时间
    times() {
      let now = new Date().getHours();
      // let now = 1;
      this.nowTimes = now;
      if (now >= 6 && now <= 12) {
        this.morning =
          "上午好！晨曦徐徐拉开了帷幕,又是一个绚丽多彩的早晨,带着清新降临人间...";
      } else if (now > 12 && now <= 18) {
        this.after =
          "下午好！到处放射着明媚的阳光,到处炫耀着五颜的色彩,到处飞扬着悦耳的鸟叫虫鸣,到处飘荡着令人陶醉的香气...";
      } else if (now > 18 && now <= 24) {
        this.evening = "晚上好！夜幕降临了,迷人的夜空使人陶醉...";
      } else {
        this.earyMorning = "凌晨好！睡觉吧！熬夜伤身...";
      }
      //   季节
      let month = new Date().getMonth() + 1;
      if (month >= 1 && month <= 3) {
        this.month.spring = "天街小雨润如酥,草色遥看近却无. ——韩愈《早春》";
      } else if (month > 3 && month <= 6) {
        this.month.summer =
          "树阴满地日当午,梦觉流莺时一声。——宋·苏舜钦《夏意》 ";
      } else if (month > 6 && month <= 9) {
        this.month.autumn = "空山新雨后，天气晚来秋。--王维《山居秋暝》";
      } else {
        this.month.winter =
          "欲渡黄河冰塞川,将登太行雪满山。——出自唐代李白的《行路难》";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.timesImage {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(240, 240, 240, 0.8),
    rgba(222, 221, 221, 0.9)
  );
}
.time {
  display: flex;
  position: relative;
  top: 100px;
}
.timeInfo {
  flex: 1;
  font-size: 13px;
  color: rgb(24, 23, 23);
}
.month {
  padding-left: 620px;
  padding-top: 200px;
  font-size: 12px;
  color: rgba(254, 0, 0, 0.9);
}
.timeImage img {
  width: 100%;
  height: 100%;
}
</style>